<template>
  <div>
      <el-table
      :data="forzenUsers ? forzenUsers.filter(data => !search || data.user_name.toLowerCase().includes(search.toLowerCase())) : forzenUsers"
      style="width: 100%"
      max-height="560px"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="user_name"
        label="名称"
        width="200">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="email"
        label="邮箱"
        width="200">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="personal_signature"
        label="个性签名"
        width="200">
      </el-table-column>
      <!-- show-overflow-tooltip=true 让数据单行显示，不换行，超出用tooltip显示 -->
      <el-table-column
        prop="avatar"
        label="头像">
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.avatar"
            style="width: 100px; height: 100px"
            :src="scope.row.newPic"
            fit="contain">
          </el-image>
          <p v-else>暂无图片</p>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot="header">
          <el-input
            style="width: 200px"
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handlerThaw(scope.row.user_id)">解冻</el-button>
          <!-- <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.user_id)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button type="danger" @click="thawAll()"  :disabled="!forzenUsers">全部解冻</el-button>
    </div>
  </div>
</template>

<script>
  import { getFrozenUsers, thaw } from 'network/users'
  import { getPicture } from 'network/picture'

  export default {
    name: 'Thaw',
    data() {
      return {
        forzenUsers: [],
        // 是否弹出对话框
        centerDialogVisible: false,
        // 被选中的行
        multipleSelection: [],
        // 搜索关键词
        search: ''
      }
    },
    methods: {
      // 解冻用户
      handlerThaw(id) {
        this.$confirm('此操作将解冻该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 与数据库交互，解冻该用户
          thaw(id).then(res => {
            if (res.status === 1) {
              this.$message({
                type: 'error',
                message: res.message
              })
            } else {
              this.$message({
                type: 'success',
                message: res.message
              })
              // 解冻用户成功，重新获取被冻结的用户
              this.getFrozenUsers()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消冻结'
          });         
        })
      },

      // 多选框被选中时，保存被选中的数据
      handleSelectionChange(val) {
        this.multipleSelection = val
      },

      // 解冻所有用户
      thawAll() {
        if (this.multipleSelection.length === 0) {
          return this.$message({
            type: 'error',
            message: '没有选中任何数据！'
          })
        }
        this.$confirm('此操作将解冻所有用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 循环被选中的行数，删除数据
          this.multipleSelection.forEach(item => {
            let id = item.user_id
            // 与数据库交互，冻结该用户
            thaw(id).then(res => {
              if (res.status === 1) {
                return this.$message({
                  type: 'error',
                  message: res.message
                })
              }
              this.getFrozenUsers()
            })
          })
          // 冻结完毕，显示提示信息
          this.$message({
            type: 'success',
            message: '全部解冻成功！'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消冻结'
          })   
        })
      },

      get(avatar) {
        console.log(avatar);
      },

      // 获取被冻结的所有用户数据
      getFrozenUsers() {
        // 发送网络请求
        getFrozenUsers().then(res => {
          this.forzenUsers = res.data
          this.forzenUsers && this.forzenUsers.forEach(item => {
            // 获取图片
            let avatar = item.avatar
            if (avatar) { 
              getPicture(avatar).then(res => {
                let url = URL.createObjectURL(res)
                this.$set(item, 'newPic', url)
              })
            }
          })
        })
      }
    },
    created() {
      // 获取被冻结的所有用户数据
      this.getFrozenUsers()
    }
  }
</script>

<style scoped>

</style>